<template> 
    <div class="box" v-if="menuChild.length">
        <div v-for="item in menuChild" :key="item.id">
            <el-submenu :index="String(item.id)" v-if="item.menu&&item.menu.length" :class="collapse?'hide-sub-icon':''">
                <template slot="title">
                    <span :class="`iconstyle iconfont icon-${item.menu_icon}`"></span>
                    <span slot="title" v-if="!collapse" style="padding-left:8px">{{ item.menu_name }}</span>
                </template>
                <nav-item :menuChild="item.menu" @listenClick="handClick"></nav-item>
            </el-submenu>
            <div class="navClass" v-else-if="item.id > 100000">{{ item.menu_name }}</div>
            <el-menu-item :index="item.menu_url" @click="handClick(item)" v-else>
                <span :class="`iconstyle iconfont icon-${item.menu_icon}`"></span>
                <span slot="title" style="padding-left:8px;font-weight:600">{{ item.menu_name }}</span>
            </el-menu-item>  
        </div>
       <!-- <div class="timebox" v-show="!collapse">
            <div>当前规格：{{ $store.state.users.order.specs }}</div>
            <div>到期时间：{{ $store.state.users.order.expire }}</div>
        </div> -->
    </div>
</template>

<script>
import navItem from "../navitem"
export default {
    name:'navItem',
    components:{
        navItem
    },
    props:{
        menuChild:Array,
        collapse:Boolean
    },
    created(){
        this.innerWidth = window.innerWidth
        window.onresize = () => {
            this.innerWidth = window.innerWidth
        }
    },
    data(){
        return {
            orderList: [],
            innerWidth:0
        }
    },
    methods:{
        /**监听本身的事件 */
        handClick(item){
            this.$emit('listenClick',item);
        },
    }
}
</script>

<style lang="stylus" scoped>
.box
    min-height  116vh
   .navClass
      padding 7px 0 6px 10px
      color #484848
      font-size 12px
   .el-menu-item.is-active
      background-color rgb(69,80,94)!important
   .nav-img-icon
      width 24px
      max-height 18px
      margin 0 10px 0 17px
   .seticon 
      vertical-align middle
      margin-right 5px
      text-align center
      font-size 18px
   .hide-sub-icon
      >>>.el-icon-arrow-right
           display none !important
   .iconstyle
      font-size 16px
      padding 0
      margin 0 10px 0 17px
</style>